<template>
  <div class="home">
    <div class="home-tab">
      <div class="home-tab-per"
           :key="index"
           v-for="(item,index) in tabList"
           :class="{'tab-selected': tabSelected === index}"
           @click="clickTab(index)">
        <span>{{item}}</span>
      </div>
    </div>
    <div class="contain">
      <component :is="componentsName[tabSelected]">
      </component>
    </div>
    <home-nav></home-nav>
  </div>
</template>

<script>
import mixins from '@/mixins'
import shop from './shop'
import study from './study'
import HomeNav from '@/components/home-nav'
export default {
  name: 'home',
  mixins: [mixins],
  data () {
    return {
      tabList: ['商城', '商学院'],
      tabSelected: 0,
      componentsName: ['shop', 'study']
    }
  },
  created () {
    this.BIND_LOADING(false)
  },
  destroyed () {
  },
  async mounted () {
  },
  methods: {
    clickTab (index) {
      this.tabSelected = index
    }
  },
  components: {
    shop,
    study,
    HomeNav
  }
}
</script>


<style lang="stylus" scoped>
.home {
  .home-tab {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    font-size: 32px;
    display: flex;
    // height: 300px;
    width: 100%;
    height: 91px;
    justify-content: center;
    align-items: center;
    background: white;
    z-index: 10;

    .home-tab-per {
      color: rgba(97, 97, 97, 1);
      margin-top: 20px;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: cneter;
      padding-bottom: 25px;
    }

    .tab-selected {
      color: RGBA(174, 42, 38, 1);
      padding-bottom: 20px;
      border-bottom: 5px solid rgba(174, 42, 38, 1);
    }
  }

  .contain {
    margin-top: 91px;
    padding-bottom: 98px;
    background: rgba(245, 245, 245, 1);
    // background: red;
  }
}
</style>
